<script>
import manageApi from "@/api/manage_api.js";
import TempBox from "@/components/TempBox.vue";
export default {
  name: "THMonitor",
  components: {TempBox},
  data(){
    return {
      timer:null,
      dataList:[]
    }
  },
  methods:{
    getTempHumid(){
      manageApi.getAllTempHumid().then(response => {
        this.dataList = response.data
        console.log(response.data)
      })
    }
  },
  mounted() {
    this.getTempHumid()
    this.timer = setInterval(this.getTempHumid, 10000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<template>
  <dv-decoration11 class="title">生产现场温湿度数据监控</dv-decoration11>
  <div class="container">
    <TempBox :deviceId="data['deviceId']" :temp="data['temperature']" :humid="data['humidity']" v-for="(data,index) in dataList"/>
  </div>

</template>

<style scoped>
.title{
  margin: auto;
  width: 40vh;
  height: 10vh;
  font-size: 30px;
  font-weight: bold;
  color: navy;
}
.container{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}
body{
  background-color: lightsteelblue;
}
</style>